94:I[903690,["/chat-static/_next/static/chunks/2ny0f3_zeefg8.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/0tnuf2s5s5v2b.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/30lce29da8oo1.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/2jq-eythiw3uq.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/2rbb5tk4zsbxd.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/1bxdx5g1i2u3_.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/0_63llplob6-g.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/3fnei9rs1dgde.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/1pq2aur_e5qy0.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/32hpviv79sh3c.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/2enqbhikau6b5.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/0-02mutk2paax.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/3ow484-39ezmh.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/0odbdj3xheoud.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/3kttbsa09z94i.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/2vimcu7p9bdlv.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/0hgbip01nrq4-.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/19vlq7942mtcb.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/3xb098o7ee2zm.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/0kwqxvdt6a1ea.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/2u_3h3qgfbb7o.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/0ho7-octsuvp_.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/0id9j_mb2s75g.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/27b-lnity-pz-.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/3ekidzlkpx_x-.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/1fxgzfhb2yxhh.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/0q-aa5a4-l3la.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/0ya908h_rpkt5.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/10zqa_zuh8jnr.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/3z1z00qa_2a_9.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/0-s0m6g6amhh9.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/3hkmb-4u52qh1.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm"],"ExplicitChatIdProvider"] 95:I[838238,["/chat-static/_next/static/chunks/2ny0f3_zeefg8.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/0tnuf2s5s5v2b.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/30lce29da8oo1.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/2jq-eythiw3uq.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/2rbb5tk4zsbxd.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/1bxdx5g1i2u3_.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/0_63llplob6-g.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/3fnei9rs1dgde.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/1pq2aur_e5qy0.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/32hpviv79sh3c.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/2enqbhikau6b5.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/0-02mutk2paax.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/3ow484-39ezmh.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/0odbdj3xheoud.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/3kttbsa09z94i.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/2vimcu7p9bdlv.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/0hgbip01nrq4-.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/19vlq7942mtcb.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/3xb098o7ee2zm.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/0kwqxvdt6a1ea.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/2u_3h3qgfbb7o.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/0ho7-octsuvp_.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/0id9j_mb2s75g.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/27b-lnity-pz-.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/3ekidzlkpx_x-.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/1fxgzfhb2yxhh.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/0q-aa5a4-l3la.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/0ya908h_rpkt5.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/10zqa_zuh8jnr.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/3z1z00qa_2a_9.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/0-s0m6g6amhh9.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm","/chat-static/_next/static/chunks/3hkmb-4u52qh1.js?dpl=dpl_DLjBpQKcoeUsjM9fxgisFbDmpgVm"],"SWRDataProvider"] 96:T169f,[V0_FILE]typescriptreact:file="app/page.tsx" "use client" import DraggableButton from "./components/DraggableButton" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="app/components/DraggableButton.tsx" "use client" import { useState, useRef, useEffect } from "react" import { motion, useMotionValue, useTransform, useSpring, useAnimation } from "framer-motion" const DraggableButton = () => { const [quadrant, setQuadrant] = useState(1) const constraintsRef = useRef(null) const audioRef = useRef(null) const x = useMotionValue(0) const y = useMotionValue(0) const rotateX = useTransform(y, [-200, 200], [15, -15]) const rotateY = useTransform(x, [-200, 200], [-15, 15]) const springConfig = { damping: 10, stiffness: 100 } const scaleSpring = useSpring(1, springConfig) const controls = useAnimation() useEffect(() => { audioRef.current = new (window.AudioContext || (window as any).webkitAudioContext)() }, []) const playSound = (frequency: number, duration: number) => { if (audioRef.current) { const oscillator = audioRef.current.createOscillator() const gainNode = audioRef.current.createGain() oscillator.connect(gainNode) gainNode.connect(audioRef.current.destination) oscillator.frequency.value = frequency oscillator.type = "sine" gainNode.gain.setValueAtTime(0.7, audioRef.current.currentTime) gainNode.gain.exponentialRampToValueAtTime(0.00001, audioRef.current.currentTime + duration) oscillator.start() oscillator.stop(audioRef.current.currentTime + duration) } } const handleDragStart = () => { playSound(330, 0.1) // Play a higher pitch sound when starting to drag scaleSpring.set(1.1) } const handleDragEnd = (event: any, info: any) => { playSound(220, 0.2) // Play a lower pitch sound when dropping scaleSpring.set(1) const newQuadrant = getQuadrant(x.get(), y.get()) setQuadrant(newQuadrant) // Wobble effect controls.start({ rotate: [0, -5, 5, -5, 5, 0], transition: { duration: 0.5 }, }) // Tilt based on velocity const tiltX = -info.velocity.y * 0.2 const tiltY = info.velocity.x * 0.2 controls.start({ rotateX: tiltX, rotateY: tiltY, transition: { duration: 0.5 } }) } const getQuadrant = (x: number, y: number) => { if (x >= 0 && y >= 0) return 1 if (x < 0 && y >= 0) return 2 if (x < 0 && y < 0) return 3 return 4 } const getBackgroundColor = () => { switch (quadrant) { case 1: return "bg-red-500" case 2: return "bg-blue-500" case 3: return "bg-green-500" case 4: return "bg-yellow-500" default: return "bg-gray-500" } } return (

{/* X and Y axes */}

Just Ship It

) } export default DraggableButton [V0_FILE]javascript:file="tailwind.config.js" isFixed="true" isQuickEdit="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", ], theme: { extend: { colors: { red: { 500: "#EF4444", }, blue: { 500: "#3B82F6", }, green: { 500: "#10B981", }, yellow: { 500: "#F59E0B", }, gray: { 100: "#F3F4F6", 300: "#D1D5DB", 500: "#6B7280", }, border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, plugins: [require("tailwindcss-animate")], } 8a:["$","$L94",null,{"chatId":"yuv1Fj677Pg","children":["$","$L95",null,{"data":{"@\"active-block\",\"yuv1Fj677Pg\",":{"id":"b_UuJMIaE6Mfo","messageId":"RTvbbT9i1fx1bYwsOwKB1xBgofjfM6wD","source":"$96","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"interactive-button","type":"code-project","project":"interactive-button"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"yuv1Fj677Pg\",":false,"":null},"children":"$L97"}]}]

About

Tags

Share

About

Tags

Share

More from vixclotet

More Templates Like This